<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { queryCourseHole, queryCourseCupTee } from '@/api/course';
  import { CourseHole, CourseCupTee } from '@/types/course';
  import { Message } from '@arco-design/web-vue';
  import { TEE_TYPES } from '@/config/course';
  import HoleEditor from './hole-editor.vue';
  import HandicapSync from './handicap-sync.vue';

  const props = defineProps<{
    courseId: string;
    courseOfficeId?: string;
    cupId: string;
    cupOfficeId?: string;
    showSync: boolean;
  }>();

  const loading = ref(false);
  const teeList = ref<CourseCupTee[]>([]);
  const holeList = ref<CourseHole[]>([]);

  const getTotal = (holeType: number, key: string) => {
    let i = 0;
    holeList.value.forEach((item) => {
      if (item.holeType === holeType) {
        // @ts-ignore
        const value = item[key];
        if (value !== undefined) {
          i += value;
        }
      }
    });
    return i;
  };

  const initData = async () => {
    try {
      loading.value = true;
      const teeRes = await queryCourseCupTee(props.courseId, props.cupId);
      teeList.value = teeRes.data.data || [];
      teeList.value.sort((a, b) => {
        const i1 = TEE_TYPES.indexOf(a.teeColor);
        const i2 = TEE_TYPES.indexOf(b.teeColor);
        return i1 - i2;
      });

      const res = await queryCourseHole(props.courseId, props.cupId);
      holeList.value = res.data.data || [];
    } finally {
      loading.value = false;
    }
  };

  const editorMode = ref('');
  const editing = ref(false);

  const handleEditDone = (refresh: boolean) => {
    if (refresh) {
      initData();
    }
    editing.value = false;
  };

  const syncing = ref(false);
  const beginSync = () => {
    if (props.courseOfficeId) {
      syncing.value = true;
    } else {
      Message.warning('请先绑定差点系统的球场');
    }
  };
  const handleSyncDone = (refresh: boolean) => {
    if (refresh) {
      initData();
    }
    syncing.value = false;
  };

  onMounted(() => {
    initData();
  });
</script>

<template>
  <div class="hole-info">
    <div class="hole-info-title"> 球洞信息 </div>
    <a-space v-if="showSync" style="margin-left: 20px">
      <a-button
        v-if="holeList.length > 0"
        @click="
          editorMode = 'edit';
          editing = true;
        "
      >
        <template #icon><icon-edit /></template>
        修改
      </a-button>

      <a-button
        @click="
          editorMode = 'create';
          editing = true;
        "
      >
        <template #icon><icon-plus /></template>
        添加
      </a-button>

      <a-button @click="beginSync">
        <template #icon><icon-sync /></template>
        从差点系统同步
      </a-button>
    </a-space>
  </div>
  <div style="margin-top: 18px">
    <a-spin :loading="loading" style="width: 100%">
      <a-empty v-if="holeList.length === 0" />
      <div v-else>
        <div
          v-if="teeList.length > 0"
          class="hole-table"
          style="margin-bottom: 20px"
        >
          <div class="hole-table-header">前九洞+后九洞评定数据</div>
          <div class="hole-table-tb">
            <div class="hole-table-item">
              <div class="hole-table-cell">TEE台</div>
            </div>
            <div class="hole-table-item">
              <div class="hole-table-cell">难度值</div>
            </div>
            <div class="hole-table-item">
              <div class="hole-table-cell">坡度值</div>
            </div>
            <div class="hole-table-item">
              <div class="hole-table-cell">码数</div>
            </div>
          </div>
          <div
            v-for="tee in teeList"
            :key="tee.id"
            class="hole-table-tb"
            :class="`tee-color-${TEE_TYPES.indexOf(tee.teeColor)}`"
          >
            <div class="hole-table-item">
              <div class="hole-table-cell">{{ tee.teeColor }}</div>
            </div>
            <div class="hole-table-item">
              <div class="hole-table-cell">{{ tee.courseRating }}</div>
            </div>
            <div class="hole-table-item">
              <div class="hole-table-cell">{{ tee.slopeRating }}</div>
            </div>
            <div class="hole-table-item">
              <div class="hole-table-cell">{{ tee.teeLength }}</div>
            </div>
          </div>
        </div>

        <div class="hole-table">
          <div class="hole-table-header">前九洞</div>
          <div class="hole-table-tb">
            <div class="hole-table-item">
              <div>HOLE</div>
              <div class="hole-table-cell black">男子黑TEE</div>
              <div class="hole-table-cell gold">男子金TEE</div>
              <div class="hole-table-cell blue">男子蓝TEE</div>
              <div class="hole-table-cell white">男子白TEE</div>
              <div class="hole-table-cell red">男子红TEE</div>
              <div class="hole-table-cell purple">男子紫TEE</div>
              <div class="hole-table-cell gold">女子金TEE</div>
              <div class="hole-table-cell blue">女子蓝TEE</div>
              <div class="hole-table-cell white">女子白TEE</div>
              <div class="hole-table-cell red">女子红TEE</div>
              <div class="hole-table-cell purple">女子紫TEE</div>
              <div>PAR</div>
              <div>INDEX</div>
            </div>

            <div
              v-for="hole in holeList
                .filter((i) => i.holeType === 0)
                .sort((a, b) => a.holeIndex - b.holeIndex)"
              :key="hole.id"
            >
              <div>{{ hole.holeIndex }}</div>
              <div class="hole-table-cell black">{{ hole.maleBlack }}</div>
              <div class="hole-table-cell gold">{{ hole.maleGold }}</div>
              <div class="hole-table-cell blue">{{ hole.maleBlue }}</div>
              <div class="hole-table-cell white">{{ hole.maleWhite }}</div>
              <div class="hole-table-cell red">{{ hole.maleRed }}</div>
              <div class="hole-table-cell purple">{{ hole.malePurple }}</div>
              <div class="hole-table-cell gold">{{ hole.femaleGold }}</div>
              <div class="hole-table-cell blue">{{ hole.femaleBlue }}</div>
              <div class="hole-table-cell white">{{ hole.femaleWhite }}</div>
              <div class="hole-table-cell red">{{ hole.femaleRed }}</div>
              <div class="hole-table-cell purple">{{ hole.femalePurple }}</div>
              <div>{{ hole.par }}</div>
              <div>{{ hole.holePriority }}</div>
            </div>

            <div>
              <div>TOTAL</div>
              <div class="hole-table-cell black">
                {{ getTotal(0, 'maleBlack') }}
              </div>
              <div class="hole-table-cell gold">
                {{ getTotal(0, 'maleGold') }}
              </div>
              <div class="hole-table-cell blue">
                {{ getTotal(0, 'maleBlue') }}
              </div>
              <div class="hole-table-cell white">
                {{ getTotal(0, 'maleWhite') }}
              </div>
              <div class="hole-table-cell red">
                {{ getTotal(0, 'maleRed') }}
              </div>
              <div class="hole-table-cell purple">
                {{ getTotal(0, 'malePurple') }}
              </div>
              <div class="hole-table-cell gold">
                {{ getTotal(0, 'femaleGold') }}
              </div>
              <div class="hole-table-cell blue">
                {{ getTotal(0, 'femaleBlue') }}
              </div>
              <div class="hole-table-cell white">
                {{ getTotal(0, 'femaleWhite') }}
              </div>
              <div class="hole-table-cell red">
                {{ getTotal(0, 'femaleRed') }}
              </div>
              <div class="hole-table-cell purple">
                {{ getTotal(0, 'femalePurple') }}
              </div>
              <div>
                {{ getTotal(0, 'par') }}
              </div>
              <div>-</div>
            </div>
          </div>
        </div>

        <div style="height: 12px"></div>

        <div class="hole-table">
          <div class="hole-table-header">后九洞</div>
          <div class="hole-table-tb">
            <div class="hole-table-item">
              <div>HOLE</div>
              <div class="hole-table-cell black">男子黑TEE</div>
              <div class="hole-table-cell gold">男子金TEE</div>
              <div class="hole-table-cell blue">男子蓝TEE</div>
              <div class="hole-table-cell white">男子白TEE</div>
              <div class="hole-table-cell red">男子红TEE</div>
              <div class="hole-table-cell purple">男子紫TEE</div>
              <div class="hole-table-cell gold">女子金TEE</div>
              <div class="hole-table-cell blue">女子蓝TEE</div>
              <div class="hole-table-cell white">女子白TEE</div>
              <div class="hole-table-cell red">女子红TEE</div>
              <div class="hole-table-cell purple">女子紫TEE</div>
              <div>PAR</div>
              <div>INDEX</div>
            </div>

            <div
              v-for="hole in holeList
                .filter((i) => i.holeType === 1)
                .sort((a, b) => a.holeIndex - b.holeIndex)"
              :key="hole.id"
            >
              <div>{{ hole.holeIndex }}</div>
              <div class="hole-table-cell black">{{ hole.maleBlack }}</div>
              <div class="hole-table-cell gold">{{ hole.maleGold }}</div>
              <div class="hole-table-cell blue">{{ hole.maleBlue }}</div>
              <div class="hole-table-cell white">{{ hole.maleWhite }}</div>
              <div class="hole-table-cell red">{{ hole.maleRed }}</div>
              <div class="hole-table-cell purple">{{ hole.malePurple }}</div>
              <div class="hole-table-cell gold">{{ hole.femaleGold }}</div>
              <div class="hole-table-cell blue">{{ hole.femaleBlue }}</div>
              <div class="hole-table-cell white">{{ hole.femaleWhite }}</div>
              <div class="hole-table-cell red">{{ hole.femaleRed }}</div>
              <div class="hole-table-cell purple">{{ hole.femalePurple }}</div>
              <div>{{ hole.par }}</div>
              <div>{{ hole.holePriority }}</div>
            </div>

            <div>
              <div>TOTAL</div>
              <div class="hole-table-cell black">
                {{ getTotal(1, 'maleBlack') }}
              </div>
              <div class="hole-table-cell gold">
                {{ getTotal(1, 'maleGold') }}
              </div>
              <div class="hole-table-cell blue">
                {{ getTotal(1, 'maleBlue') }}
              </div>
              <div class="hole-table-cell white">
                {{ getTotal(1, 'maleWhite') }}
              </div>
              <div class="hole-table-cell red">
                {{ getTotal(1, 'maleRed') }}
              </div>
              <div class="hole-table-cell purple">
                {{ getTotal(1, 'malePurple') }}
              </div>
              <div class="hole-table-cell gold">
                {{ getTotal(1, 'femaleGold') }}
              </div>
              <div class="hole-table-cell blue">
                {{ getTotal(1, 'femaleBlue') }}
              </div>
              <div class="hole-table-cell white">
                {{ getTotal(1, 'femaleWhite') }}
              </div>
              <div class="hole-table-cell red">
                {{ getTotal(1, 'femaleRed') }}
              </div>
              <div class="hole-table-cell purple">
                {{ getTotal(1, 'femalePurple') }}
              </div>
              <div>
                {{ getTotal(1, 'par') }}
              </div>
              <div>-</div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>

  <HoleEditor
    v-if="editing"
    :course-id="courseId"
    :cup-id="cupId"
    :mode="editorMode"
    @close="handleEditDone"
  />

  <HandicapSync
    v-if="syncing"
    :cup-id="cupId"
    :course-office-id="courseOfficeId as string"
    :course-id="courseId"
    @close="handleSyncDone"
  />
</template>

<style lang="less" scoped>
  .hole-info {
    margin: 30px 0;
    display: flex;
    align-items: center;
    &-title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .hole-table {
    border: 1px solid rgb(var(--gray-3));
    border-radius: 3px 3px 0 0;
    font-size: 12px;
    .tee-color-0 {
      color: #fff;
      background: #222;
    }
    .tee-color-1,
    .tee-color-6 {
      color: #333;
      background: rgb(var(--gold-6));
    }
    .tee-color-2,
    .tee-color-7 {
      color: #fff;
      background: rgb(var(--blue-6));
    }
    .tee-color-3,
    .tee-color-8 {
      color: #333;
    }
    .tee-color-4,
    .tee-color-9 {
      color: #fff;
      background: rgb(var(--red-6));
    }
    .tee-color-5,
    .tee-color-10 {
      color: #fff;
      background: rgb(var(--purple-6));
    }
    &:deep(input) {
      text-align: center;
    }
    &-header {
      text-align: center;
      border-bottom: 1px solid rgb(var(--gray-3));
      line-height: 32px;
      background: rgb(var(--gray-1));
      padding: 0 12px;
      border-radius: 3px 3px 0 0;
    }
    &-tb {
      display: flex;
      & > div {
        flex: 1;
        min-width: 0;
        text-align: center;
        &:last-child {
          & > div {
            border-right: none;
          }
        }
        & > div {
          padding: 0 5px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid rgb(var(--gray-3));
          border-right: 1px solid rgb(var(--gray-3));
          &.black {
            color: #fff;
            background: #222;
          }
          &.gold {
            color: #333;
            background: rgb(var(--gold-6));
          }
          &.blue {
            color: #fff;
            background: rgb(var(--blue-6));
          }
          &.white {
            color: #333;
          }
          &.red {
            color: #fff;
            background: rgb(var(--red-6));
          }
          &.purple {
            color: #fff;
            background: rgb(var(--purple-6));
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
</style>
